Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Init overview page #39

Merged
merged 24 commits into from
Dec 8, 2023
Merged

Init overview page #39

merged 24 commits into from
Dec 8, 2023

Conversation

kkosiorowska
Copy link
Contributor

@kkosiorowska kkosiorowska commented Nov 21, 2023

This PR splits the site into 3 main elements: position details pool stats and transaction history. The page split should make it easier to work on the separate elements of the page. The size and positioning of elements may change. Please don't pay more attention to styles. These also change dynamically and typography or colors are not defined yet. The purpose of this PR is to define only the separate components. Fixes to the styles will be done in the next steps.

What has been done

  • Split the site into 3 main elements: position details pool stats and transaction history.
  • Change the approach to using icons. Let's use the createIcon function to use the dedicated Icon component from Chakra UI. This will allow us to easily change the color of our icons depending on the situation. This is possible by using the currentColor value for the svg.
  • Create a separate file of constants -currencies.ts
  • Define the Switch component for the theme.
  • Defines the default Tooltip props for the theme.
  • Update styles for the link button.
  • Improve the use of VStack, HStack and Flex - Let's use the Stack component when it is a simple row or column of items. If we need to customize the items let's use Flex.

UI

Screenshot 2023-11-22 at 14 16 43

- use a stack elements in the vertical or horizontal direction
- create separate components for  icons
- add `currencies.ts` file
- add a toggle button to switch the currency
- add a button to the documentation
@kkosiorowska kkosiorowska marked this pull request as ready for review November 23, 2023 10:08
@nkuba nkuba added this to the MVP milestone Nov 27, 2023
Base automatically changed from connect-wallet to main November 28, 2023 14:50
The Stack component and the Flex component have their children spaced out evenly but the key difference is that the Stack won't span the entire width of the container whereas the Flex will.

Let's use the Stack component when it is a simple row or column of items.  If we need to customize the items let's use Flex.

More info: https://chakra-ui.com/docs/components/stack#notes-on-stack-vs-flex
@kkosiorowska kkosiorowska mentioned this pull request Dec 4, 2023
dapp/src/DApp.tsx Outdated Show resolved Hide resolved
dapp/src/DApp.tsx Outdated Show resolved Hide resolved
dapp/src/DApp.tsx Outdated Show resolved Hide resolved
dapp/src/components/Navbar/ConnectWallet.tsx Outdated Show resolved Hide resolved
dapp/src/components/Navbar/ConnectWallet.tsx Outdated Show resolved Hide resolved
dapp/src/static/icons/Bitcoin.tsx Outdated Show resolved Hide resolved
dapp/src/static/icons/ChevronRight.tsx Outdated Show resolved Hide resolved
dapp/src/static/icons/Ethereum.tsx Outdated Show resolved Hide resolved
dapp/src/static/icons/Info.tsx Outdated Show resolved Hide resolved
dapp/src/theme/Switch.ts Outdated Show resolved Hide resolved
`createIcon` add the svg tag by default. Let's remove the unnecessary extra tag.
dapp/src/DApp.tsx Outdated Show resolved Hide resolved
dapp/src/components/Overview/PositionDetails.tsx Outdated Show resolved Hide resolved
dapp/src/components/Overview/PositionDetails.tsx Outdated Show resolved Hide resolved
dapp/src/components/Overview/PositionDetails.tsx Outdated Show resolved Hide resolved
dapp/src/components/Overview/Statistics.tsx Outdated Show resolved Hide resolved
dapp/src/components/Overview/TransactionHistory.tsx Outdated Show resolved Hide resolved
dapp/src/components/Overview/index.tsx Show resolved Hide resolved
dapp/src/components/Overview/index.tsx Outdated Show resolved Hide resolved
dapp/src/components/Overview/index.tsx Outdated Show resolved Hide resolved
dapp/src/components/Overview/PositionDetails.tsx Outdated Show resolved Hide resolved
dapp/src/components/Overview/Statistics.tsx Outdated Show resolved Hide resolved
dapp/src/components/Overview/TransactionHistory.tsx Outdated Show resolved Hide resolved
By `CardProps`  we can avoid unnecessary wrappers in grid and control content from the parent component.
Copy link
Contributor

@r-czajkowski r-czajkowski left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:shipit:

@r-czajkowski r-czajkowski merged commit a4f0168 into main Dec 8, 2023
9 checks passed
@r-czajkowski r-czajkowski deleted the init-overview-page branch December 8, 2023 10:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants